<template>
  <div style="display: flex;height: 100%;width: 100%;flex-direction: column">
    <div style="display: flex;">
      <el-tag type="success">达标</el-tag>
      <el-tag type="warning">不达标</el-tag>
      <el-tag type="danger">超标</el-tag>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :cell-class-name="cellClassName">
      <el-table-column prop="equipmentNme" label="设备名称" min-width="140"></el-table-column>
      <el-table-column prop="time" label="监测时间" min-width="130"></el-table-column>
      <el-table-column prop="TDS" label="TDS" min-width="90"></el-table-column>
      <el-table-column prop="temperature" label="温度" ></el-table-column>
      <el-table-column prop="oxygen" label="余氧" ></el-table-column>
      <el-table-column prop="turbidity" label="浊度" ></el-table-column>
      <el-table-column prop="conductivity" label="电导率" ></el-table-column>
      <el-table-column prop="PH" label="PH" ></el-table-column>
      <el-table-column prop="plantName" label="水厂名称" min-width="90"></el-table-column>
      <el-table-column prop="equipmentLocation" label="设备位置" ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  name: "waterExamine",
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  props:['dayProducedWaterQualityMonth'],
  data() {
    return {
      chart: null,
      tableData:[{
        equipmentNme:'南师水站出水厂',
        time:'2023-08-30 13:00',
        TDS:'154164.86',
        temperature:'27.202',
        oxygen:'0.51',
        turbidity:'0.399',
        conductivity:'308.33',
        PH:'7.76',
        plantName:'南师水站',
        equipmentLocation:'出厂',
      },{
        equipmentNme:'聂庄供水站出水厂',
        time:'2023-08-30 15:00',
        TDS:'132653.16',
        temperature:'25.33',
        oxygen:'0.4',
        turbidity:'0.428',
        conductivity:'265.306',
        PH:'8.24',
        plantName:'聂庄供水站',
        equipmentLocation:'出厂',
      },{
        equipmentNme:'苏史张村',
        time:'2023-08-30 16:00',
        TDS:'117741.53',
        temperature:'25.403',
        oxygen:'0.62',
        turbidity:'0.545',
        conductivity:'235.483',
        PH:'7.44',
        plantName:'南师水站',
        equipmentLocation:'末梢',
      },{
        equipmentNme:'大郝村村委会',
        time:'2023-08-30 17:00',
        TDS:'15585.36',
        temperature:'27.422',
        oxygen:'0.49',
        turbidity:'0.429',
        conductivity:'31.171',
        PH:'8.18',
        plantName:'聂庄供水站',
        equipmentLocation:'末梢',
      },{
        equipmentNme:'苏史张村',
        time:'2023-08-30 19:00',
        TDS:'59088.06',
        temperature:'25.258',
        oxygen:'0.62',
        turbidity:'0.57',
        conductivity:'118.176',
        PH:'7.44',
        plantName:'南师水站',
        equipmentLocation:'末梢',
      }],
    }
  },
  watch: {
    // dayProducedWaterQualityMonth(){
    //   this.chartList=[]
    //   for (let i in this.dayProducedWaterQualityMonth){
    //     let list=[]
    //     let length=0
    //     for (let j in this.dayProducedWaterQualityMonth[i]){
    //       length +=1
    //       list.push(this.dayProducedWaterQualityMonth[i][j])
    //     }
    //     if (length <12){
    //       for (let j=0;j<12-length;j++){
    //         list.push(0)
    //       }
    //     }
    //     this.chartList.push(list)
    //   }
    //   // this.chartData=[]
    //   // for (let i in this.waterSoledRatio){
    //   //   this.chartData.push(this.waterSoledRatio[i])
    //   // }
    //   this.initChart()
    // },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // initData(){
    //
    // },
    initChart() {
      if(!this.chart ){
        this.chart = echarts.init(document.getElementById('macarons'), "macarons")
      }
      this.chart.setOption ({
        color: ['rgba(255, 0, 0, 1)','rgba(25, 255, 162, 1)','rgba(255, 218, 51, 1)','rgba(77, 205, 243, 1)',],
        title: {
          text: '聂庄供水站出厂水',
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // fontWeight: "bolder",
            fontSize: 12,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: [ 'PH值', '浊度'],
          padding: [0, 0, 0, 0],
          top: 30,
          right: 0,
          textStyle: {
            fontSize: 10,
            color: "#fff", // 设置文本颜色 默认#FFF
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['8-23 13:00:00', '8-23 14:00:00', '8-23 15:00:00', '8-24 13:00:00', '8-24 14:00:00', '8-24 15:00:00'],
            axisLabel: {
              show: true,
              rotate:0,
            },
          }
        ],
        yAxis: {
          type: "value",
          scale:true,
          show:true,
          // name: '温/湿度',
          splitNumber:4,
          // interval:4,
        },
        series: [
          {
            name: 'PH值',
            type: 'line',
            stack: 'Total2',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: true,//是否默认展示圆点
            // symbol: 'circle',     //设定为实心点
            symbolSize: 8,   //设定实心点的大小
            itemStyle: {
              normal: {
                color: "rgba(25, 255, 162, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(25, 255, 162, 1)", //改变折线颜色
                },
              },
            },
            // linePoint:{
            //   show:true,
            //   radius:2,
            //   style:{
            //     fill:'#fff',
            //     lineWidth:1
            //   }
            // },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(25, 255, 162, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(25, 255, 162, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data:[8.0,8.2,8.1,8.3,8.1,8.3]
          },
          {
            name: '浊度',
            type: 'line',
            stack: 'Total3',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: true,
            symbolSize: 8,   //设定实心点的大小
            itemStyle: {
              normal: {
                color: "rgba(255, 0, 0, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(255, 0, 0, 1)", //改变折线颜色
                },
              },
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255, 0, 0, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 0, 0, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [0.8,1.2,1.8,1.5,0.9,1.7]
          },
        ]
      });
    },
    onSubmit(){

    },
    tableRowClassName({row, rowIndex}) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'success-row';
      }
      return 'odd-row';
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.label == "电导率" ) {
        if (row.conductivity >100 && row.conductivity <300){
          return 'standard'
        }else if (row.conductivity <100){
          return 'noStandard'
        }else if (row.conductivity >300){
          return 'outStandard'
        }
      }
      if (column.label == "TDS") {
        if (row.TDS >200000 && row.TDS <1000000){
          return 'standard'
        }else if (row.TDS <10000){
          return 'noStandard'
        }else if (row.TDS >1000000){
          return 'outStandard'
        }
      }
      if (column.label == "温度") {
        if (row.temperature >20 && row.temperature <30){
          return 'standard'
        }else if (row.temperature <20){
          return 'noStandard'
        }else if (row.temperature >30){
          return 'outStandard'
        }
      }
      if (column.label ==  "余氧") {
        if (row.oxygen >0.2 && row.oxygen <0.7){
          return 'standard'
        }else if (row.oxygen <0.2){
          return 'noStandard'
        }else if (row.oxygen >0.7){
          return 'outStandard'
        }
      }
      if (column.label ==  "浊度") {
        if (row.turbidity >0.2 && row.turbidity <0.7){
          return 'standard'
        }else if (row.turbidity <0.2){
          return 'noStandard'
        }else if (row.turbidity >0.7){
          return 'outStandard'
        }
      }
      if (column.label ==  "PH") {
        if (row.PH >7 && row.PH <9){
          return 'standard'
        }else if (row.PH <7){
          return 'noStandard'
        }else if (row.PH >9){
          return 'outStandard'
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
//样式文件
::v-deep .standard {
  background-color:rgba(25, 255, 162, 0.4);
}
::v-deep .noStandard {
  background-color: rgba(255, 218, 51, 0.4);
}
::v-deep .outStandard {
  background: rgba(255, 0, 0, 0.4);
}
//::v-deep .leave {
//  background: rgba($color: #92d050, $alpha: 0.7);
//}
::v-deep .el-tag.el-tag--success{
  background-color: rgba(25, 255, 162, 0.4);
  border-color: rgba(0,0,0,0);
  color:white
}
::v-deep .el-tag.el-tag--warning{
  background-color: rgba(255, 218, 51, 0.4);
  border-color: rgba(0,0,0,0);
  color:white
}
::v-deep .el-tag.el-tag--danger{
  background-color: rgba(255, 0, 0, 0.4);
  border-color: rgba(0,0,0,0);
  color:white
}
::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
  background-color:rgba(15, 34, 78,1);
  color:white;
  height:30px;line-height:30px;
  text-shadow: 0 0 10px #27cae3,0 0 20px #27cae3,0 0 30px #27cae3,0 0 40px #27cae3;
  //rgba(15, 34, 78,1)
}
::v-deep .el-table .success-row {
  background:#082b4a;
  color:white;
  border:1px solid rgba(166,166,166,0.7);
}
::v-deep .el-table .odd-row {
  background: #05213c;
  color:white;
}
::v-deep .el-table__empty-block{
  min-height: 180px;
  background-color: rgba(0,0,0,0);
  color:white;
}
::v-deep .el-table{
  min-height: 180px;
  background-color: rgba(0,0,0,0);
}
::v-deep .el-table::before, .el-table--group::after, .el-table--border::after{
  background-color: rgba(0,0,0,0);
}

::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom:none;
  text-align: center;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
  background: rgb(4, 10, 23);
  color:#27cae3;
}
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell{
  border:none;
  text-align: center;
}
</style>
